<template>
    <div class="home">
        <div v-if="routers.indexOf($route.path) === -1 && ($route.path.substring(0,19) !== '/admin/order/detail')">

            <!-- 侧边栏  备用 -->
            <van-popup class="homeMenu" v-model="popupShow" position="left" :style="{ width: '40%' }">
                <div class="tag-list">
                    <van-tag class="tag" type="default" color="#ddd" text-color="#000">
                        您上月完成案件数：<span :class="totalObj.last_mon_total < 4 ? 'red' : 'green' ">{{totalObj.last_mon_total ? totalObj.last_mon_total : 0}}</span>
                    </van-tag>
                    <van-tag class="tag" type="default" color="#ddd" text-color="#000">
                        您本月完成案件数：<span :class="totalObj.mon_total < 4 ? 'red' : 'green' ">{{totalObj.mon_total ? totalObj.mon_total : 0 }}</span>
                    </van-tag>
                    <van-tag class="tag" type="danger" color="#ffe1e1" text-color="#ad0000">
                        您当前返修案件总数：<span :class="totalObj.back_total < 4 ? 'red' : 'green' ">{{totalObj.back_total ? totalObj.back_total : 0}}</span>
                    </van-tag>
                </div>
            </van-popup>

            <mt-header title="">
                <i class="el-icon-s-operation" slot="left" @click="popupShow=true"></i>
                <i class="el-icon-s-custom" slot="right" @click="show=true"></i>
            </mt-header>

            <van-action-sheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消" />

            <van-tabs v-model="tabActive" @click="onClick" sticky animated swipeable :color="'#07c160'">
                <van-tab title="待接订单"></van-tab>
                <van-tab title="我的订单"></van-tab>
                <van-tab title="我的结算"></van-tab>
            </van-tabs>

            <nuxt-child keep-alive></nuxt-child>
        </div>
        <div style="height: 100%;" v-else>
            <nuxt-child keep-alive></nuxt-child>
        </div>
    </div>
</template>

<script>
import { getUserInfo } from '~/api/commonApi'
import warterMark from '~/util/warterMark'

export default {
    data(){
        return {
            tabActive: 0,
            show: false,
            popupShow: false,
            totalObj: {
                last_mon_total: 0,
                mon_total: 0,
                back_total: 0,
            },
            roleId: 0,
            actions: [
                { name: '修改资料', path: '/admin/order/updataData' },
                { name: '修改密码', path: '/admin/order/updataPwd'  },
                { name: '退出', path: 'exit'  }
            ],
            routers: ['/admin', '/admin/order/detail', '/admin/order/detail2', '/admin/order/detail3'],
            routerArr: [{
                index: 0,
                path: '/admin/order',
                text: '订单管理',
                role_id: 2,
                childrens: [
                    {
                        path: '/admin/order/pendingDisposal',
                        text: '待接订单',
                    },
                    {
                        path: '/admin/order/inProcessing',
                        text: '我的订单',
                    },
                    {
                        path: '/admin/order/processed',
                        text: '已完结订单',
                    }
                ]
            }, {
                index: 1,
                path: '/admin/auditor',
                text: '待审核管理',
                role_id: 3,
                childrens: [
                    {
                        path: '/admin/auditor',
                        text: '待审核列表',
                    }
                ]
            }]
        }
    },
    //缓存也会走的钩子
    deactivated(){
        this.$destroy(true);//销毁组件
    },
    created() {
        this.setRoleId()
    },
    mounted() {
        if(this.$route.path !== '/admin'){
            warterMark.set(this.$store.state.user.name)
        }else{
            warterMark.set('')
        }
    },
    watch: {
        $route: "setRoleId",
        isFollow (newVal, oldVal) {
            this.totalObj = newVal
        }
    },
    methods: {
        onSelect(item, index) {
            this.show = false
            if(item.path !== 'exit') {
                this.$router.push(item.path)
            }else{
                this.exit()
            }
        },
        //退出登录
        exit() {
            let that = this;
            this.$dialog.confirm({
                title: '提示',
                message: '是否退出登录?'
            })
            .then(() => {
                warterMark.set('')
                that.$cookies.remove('user');
                that.$cookies.remove('token');
                that.$store.commit("delUser");
                that.$axios.defaults.headers.common["Authorization"] = "";
                this.$router.push({
                    path: "/admin"
                })
            })
            .catch(() => {});
        },
        onCell(index, path) {
            this.popupShow = false
            // 关闭当前下拉框
            this.$refs.item[index].toggle()

            // 跳转路由
            this.$router.push(path)
        },
        setRoleId() {
            this.getTableActive()
            if(this.$store.state.user && this.$store.state.user.role_id){
                this.roleId = this.$store.state.user.role_id
            }
        },
        onClick(index, title) {
            if(index === 0) {
                this.$router.push('/admin/order/pendingDisposal')
            }else if(index === 1) {
                this.$router.push('/admin/order/inProcessing')
            }else{
                this.$router.push('/admin/order/processed')
            }
        },
        getTableActive() {
            let path = this.$route.path.split('/')[3]
            if(path === 'pendingDisposal') {
                this.tabActive = 0
            }else if(path === 'inProcessing'){
                this.tabActive = 1
            }else{
                this.tabActive = 2
            }
        }
    },
    computed: {
        isFollow () {
            return this.$store.state.totalObj;　　//需要监听的数据
        }
    }
}
</script>

<style lang="less" scope>
    .home{
        overflow: auto;
        background: #fff;
        height: 100%;

        .tag-list{
            width: 100%;

            .tag{
                margin-bottom: 3px;
                width: 100%;
                height: 60px;
            }
        }

        .red {
            color: #ee0a24;
        }
        
        .green {
            color: #07c160;
        }

		.mintui {
			font-size: 26px !important;
			/*no*/
		}

		[class^=el-icon-] {
			font-size: 26px !important;
			/*no*/
		}

		.homeMenu {
			height: 100%;
			margin: 0 !important;
			padding: 0 !important;
		}

		.van-sidebar-item--select {
			border-color: #26a2ff;
		}

		.add-invoice {
			display: block;
			border-radius: 100%;
			z-index: 100;
			bottom: 80px;
			right: 36px;
			position: fixed;
		}

        .van-dropdown-menu__title{
            margin-right: 50px;

            .van-ellipsis{
                margin-right: 50px;
            }
        }

    }
    
</style>